// 1 模拟数据
var totalData = ["互联网","移动互联网","it","电子商务","广告","网络编辑","产品经理","程序员","网管","文案策划","java工程师","php工程师","dreamweaver","photoshop","公文写作","70后","80后","加班狂","java","教程","SEM","SEM基础","柚说","关键词","创意","公众号","排名","网络营销","SEM","网络推广","达内","效果","数据","SEO","DSP","百度网盟","百度DSP","广点通","智慧推","粉丝通","新媒体","微信","微博","问答","百科","博客","ASO","网站","着陆页","网站分析","电商","AI助手","小小红书","大数据","大内","云计算","javascript","node","哈哈","typeScript"]

// 60
// 初始渲染标签
render()

// 获取页面中所有 class 为 textBg 的元素 初始颜色 



// 给换一换添加点击事件
$(".change span").onclick = render;


// getComputedStyle() 返回该元素的样式对象   可用于获取行内样式style 或 css样式

// 点击头部的颜色标签 对 标题 和 已添加标签textBg 进行修改
gets(".tagColor span").forEach(function(colorTag){
    colorTag.onclick = function(){
        // console.log("yes")
        // console.log( getComputedStyle(colorTag) )
        console.log(gets(".textBg"))
        gets(".textBg").forEach(function(item){
            console.log(item)
            item.style.color = getComputedStyle(colorTag).backgroundColor
        })
    }
})

// 给展开标签 绑定事件
    // 再事件程序中 this指定事件的元素 
$(".toggleBtn").onclick = function(){
    // 判断当前点击的按钮的内容是  展开  需 收起   或判断footer 是否有show类 
    if(this.innerHTML === "展开标签库"){
        this.innerHTML = "收起标签库"
        $(".footer").classList.add("show")
    }else{
        this.innerHTML = "展开标签库"
        $(".footer").classList.remove("show")
    }
}

// 给添加标签按钮 绑定事件
$(".add").onclick = function(){
    // 获取输入框的值
    var val = $(".inpText").value.trim();
    if(!val) return alert("请输入内容")

    // 判断是否可以继续添加标签   取决于我的标签是否大于5  大于  展示提示 信息
    if(gets(".myTag li").length >= 5){
        $(".tip").classList.add("show")
        return ;
    }

    // 创建一个li  让li的内容于输入框的值一致  且追加在我的标签中
    var li = document.createElement("li")
    li.innerHTML = val;
    li.classList.add("textBg")
    $(".myTag").appendChild(li)
    $(".inpText").value = ""

}



// 封装渲染函数
function render(){
    var data = dataFn( randomNum(15, 30) )  // 生辰数据  15 - 30
    // console.log(data , data.length)

    // 渲染所有标签
    $(".allTag").innerHTML = data.map(function(item){
        return `<li>${item}</li>`
    }).join("")

    // 清空我的标签 再现有的所有标签中 重新添加
    $(".myTag").innerHTML = ""
    $(".tip").classList.remove("show")

    // 给所有标签循环绑定点击事件  给我的标签添加
    gets(".allTag li").forEach(function(aTag){
        aTag.onclick = function(){
            // 判断当前点击的标签 是否可添加
            // 即 若当前点击的元素上有灰色类  表示已添加  需删除  否则可添加
            if(this.classList.contains("selected")){
                alert("no")
                this.classList.remove("selected")
                // 再我的标签中 查找于当前点击一致的内容 进行删除回退
                gets(".myTag li").forEach(function(mLi){
                    if(mLi.innerHTML === aTag.innerHTML){
                        mLi.remove()
                    }
                })
                $(".tip").classList.remove("show")
            }else{
                // alert("yes")
                // 判断是否可以继续添加标签   取决于我的标签是否大于5  大于  展示提示 信息
                if(gets(".myTag li").length >= 5){
                    $(".tip").classList.add("show")
                    return ;
                }
                // 不大于
                // 创建一个li  让li的内容于当前点击的内容一致  且追加在我的标签中
                // var li = document.createElement("li")
                // li.innerHTML = this.innerHTML;
                // $(".myTag").appendChild(li)

                // 深克隆一个当前点击的元素  追加再我的标签
                var cLi = this.cloneNode(true);
                cLi.classList.add("textBg")
                $(".myTag").appendChild(cLi)

                this.classList.add("selected")
            }
        }
    })
}


// 封装一个生成数据的函数 
function dataFn( num ){
    var arr = [] ;  // 存储数据
    while(arr.length < num){
        // 生成随机数  作为数据的下标 
        var index = randomNum(0 , totalData.length - 1);
        // 判断当前数据 是否出现过  找的是未出现 - 1
        if(arr.indexOf( totalData[index] ) === -1){
            arr.push(totalData[index])
        }
    }
    return arr
}

// 封装一个随机函数
function randomNum(min , max){
    return Math.floor(Math.random() * (max -min + 1) + min)
}

function $(el){
    return document.querySelector(el)
}

function gets(el){
    return [...document.querySelectorAll(el)]
}